<template>
    <view>
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<uni-icons type="back" size="24" @click="goBack" />
			<text class="nav-title">修改密码</text>
		</view>
        <view class="login-content">
            <view class="login">
                <view class="input-group">
                    <view class="input-row border input-flex">
                        <input type="text" focus clearable v-model="oldpassword" placeholder="请输入原始密码"
                               style="width: auto">
                    </view>
                    <view class="input-row border"><input type="text" displayable v-model="newpassword"
                                                          placeholder="请输入新密码"></view>
                    <view class="input-row"><input type="text" displayable v-model="newpassword_check"
                                                   placeholder="请再次确认新密码"></view>
                </view>
                <view class="login-button">
                    <button type="primary" class="primary" @tap="submit()">提交</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                oldpassword: '',
                newpassword: '',
                newpassword_check: '',
            }
        },
        computed: {
            ...mapState(['userInfo', 'loginStatus', 'loginInfo']),
        },
        onLoad(ops) {
        },
        onShow() {
            if (this.userInfo.token == undefined) {
                this.loginOut();
            }
        },
        methods: {
			goBack() {
				uni.navigateBack();
			},
            loginOut() {
                this.$lib.$store.commit('clearUserInfo')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            },
            async submit() {
                if (this.newpassword != this.newpassword_check) {
                    uni.showModal({
                        title: '提示',
                        content: '两次输入的密码不一致',
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return
                }
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.resetpwd,
                    data: {
                        oldpassword: this.oldpassword,
                        newpassword: this.newpassword,
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    uni.showToast({
                        title: '修改成功',
                        icon: "success"
                    })
                    this.$lib.$store.commit('clearUserInfo')
                    setTimeout(function () {
                        uni.reLaunch({
                            url: "/pages/login/index"
                        })
                    }, 2000)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: "none"
                    });
                }
            },
        }
    }
</script>

<style>
    input {
        border: 1px solid #000000
    }
	
	.nav-bar {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		/* border-bottom: 1px solid #eee; */
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}
	
    .login-title {
        color: #5d5d5d;
        font-size: 22px;
        padding: 20px 0 12px;
        font-weight: bold;
    }

    .login-content {
        width: 100%;
        margin: 0 auto;
        background: #fff;
    }

    .input-group::after,
    .input-row.border::after {
        left: 0 !important;
        height: 1px !important;
        background-color: #f6f7f9 !important;
    }

    .login {
        margin: 0 20px;
    }

    .input-row {
        display: flex;
        flex-direction: row;
        position: relative;
    }

    .input-row.border::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 15 upx;
        height: 1 upx;
        content: '';
        background-color: #c8c7cc;
    }

    .input-flex {
        align-items: center;
        justify-content: space-between
    }

    .input-row input {
        border: none;
        padding: 12px 0;
    }

    .input-group {
        margin-top: 0;
    }

    .input-group::before {
        background-color: #fff !important;
    }

    .primary {
        /* background: #4d72ff !important;
        box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
        color: #fff !important;
        border-radius: 30px;
        font-size: 17px;
        padding: 2px; */
		
		background-color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 30px;
		width:500rpx;
    }

    .login-button {
        margin-top: 7px;
    }

    .input-row uni-input {
        padding: 16px 0;
    }
</style>